<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<div class="nav">
    五子棋对战
</div>
<div class="container">
    <div>
        <div id="screen">
        </div>
        <div id="match-button">开始匹配</div>
    </div>
</div>

<body>
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        //获取玩家信息
        $.ajax({
            type: "get",
            url: "user/getUserInfo",
            success: function (body) {
                console.log(body.data.winCount);
                let data = body.data;
                let winRate = 0;
                if (data.totalCount != 0) {
                    winRate = ((data.winCount / data.totalCount)*100).toFixed(2);//保留两位小数
                }
                let screenDiv = document.querySelector("#screen")
                screenDiv.innerHTML = '玩家: ' + data.username + '   分数: ' + data.score +
                    '<br>总场次: ' + data.totalCount + '   总胜场: ' + data.winCount + '<br>胜率: ' + winRate + '%'

            }
        });
        let webSocket = new WebSocket("ws://" + location.host + "/findMatch");
        webSocket.onopen = function () {
            console.log("建立连接")
        }
        webSocket.onmessage = function (body) {
            //处理服务器返回的响应数据，这个数据是针对"开始匹配"/"结束匹配"的
            //解析得到的数据是一个JSON对象，需要解析成js对象
            let resp = JSON.parse(body.data);
            let matchButton = document.querySelector('#match-button');
            //接收失败
            console.log(resp)
            if(!resp.ok){
                if(resp.reason == '当前用户已经登录'){
                    alert(resp.reason);
                    location.replace("/login.html")
                }
                return;
            }
            if(resp.message == 'startMatch'){
                //开始匹配
                matchButton.innerHTML = '匹配中...(点击停止)'
            }else if(resp.message == 'stopMatch'){
                //结束匹配
                matchButton.innerHTML = '开始匹配'
            }else if(resp.message == 'matchSuccess'){
                //匹配成功
                console.log('匹配成功')
                location.replace("game_room.html");
            }else{
                alert(resp.reason);
            }


        }
        webSocket.onerror = function () {
            console.log("出现错误");
        }
        webSocket.onclose = function () {
            console.log("断开连接");
        }
        //监听页面关闭事件，再关闭之祈安手动调用websocket的close方法
        window.onbeforeunload = function () {
            webSocket.close();
        }

        let matchButton = document.querySelector('#match-button');
        matchButton.onclick = function () {
            //在触发websocket请求之前，先确认连接是否正常
            if (webSocket.readyState == webSocket.OPEN) {
                //如果当前readyStatus处于OPEN状态，说明连接正常
                //这里发送的数据有两种可能，开始匹配/结束匹配
                if (matchButton.innerHTML == '开始匹配') {
                    //给js对象转化为JSON
                    webSocket.send(JSON.stringify({
                        message: "startMatch",
                    }));
                    console.log("开始匹配")
                } else if (matchButton.innerHTML == '匹配中...(点击停止)') {
                    webSocket.send(JSON.stringify({
                        message: "stopMatch",
                    }));
                    console.log("结束匹配")
                }else{
                    console.log("出现匹配错误")
                }
            } else {
                //当前连接状态异常
                alert("当前连接已断开，请重新登录")
                location.replace("/login.html")
            }
        }
    </script>
</body>

</html>